<template>
  <view class="container-wrapper">
    <view class="container" @click="enterShop(shopInfo.id)">
      <view class="left">
        <image class="logo-image" :src="shopInfo.logo" mode="scaleToFill" />
      </view>
      <view class="right" :style="{ width: itemRightWidth }">
        <view class="head-info">
          <span
            class="reputation"
            v-if="shopInfo.reputation != null"
            :style="{ background: reputationColorOf(shopInfo.reputation) }"
            >{{ reputationLabelOf(shopInfo.reputation) }}</span
          >
          <text class="shop-name">{{ shopInfo.name }}</text>
        </view>
        <text class="statistical">
          <text class="item scope">
            <text class="scope-value">{{ shopInfo?.statistical?.score ?? '- ' }}</text
            >分
          </text>
          <text class="item">月售{{ salesDisplaySizeLimit(shopInfo?.statistical?.monthlySoldQuantity) }}</text>
          <text class="item" v-if="!shopInfo.isOutOfRange">{{ Math.round(shopInfo.expectedTime) }}分钟</text>
          <text class="item">{{ shopInfo.distance.toFixed(1) }}km</text>
        </text>
        <view class="activity"> </view>
        <view class="dish-priority-display" :style="{ width: itemRightWidth }">
          <view class="rol">
            <view
              class="dish"
              v-for="dish in shopInfo.dishList"
              :key="dish.id"
              @click.stop="enterShop(shopInfo.id, dish.id)"
            >
              <view class="dish-image-box">
                <image class="dish-image" :src="dish.image" mode="scaleToFill" />
              </view>
              <text class="dish-name">{{ dish.name }}</text>
              <view class="price">
                <text class="now-price"><text class="amount-symbol">￥</text>{{ dish.nowPrice }}</text>
                <text class="old-price">￥{{ dish.oldPrice }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="tis">
          <text class="out-range-tis" v-if="shopInfo.isOutOfRange!">超出商家经营范围</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import enterShop from '@/common/function/enterShop'
import { reputationColorOf, reputationLabelOf } from '@/enum/ReputationMap'
import type { ShopSurfaceInfo } from '@/types/response/shop'
import { salesDisplaySizeLimit } from '@/utils/NumberToStringDisplayUtils'
import { ref, reactive, getCurrentInstance, computed } from 'vue'
interface Props {
  shopInfo: ShopSurfaceInfo
}
withDefaults(defineProps<Props>(), {})
const instance = getCurrentInstance()

// === css vars ===
let screenWidth = ref(0)
let currentContainerWidth = ref(0)
// 计算出实际的screenWidth
uni.getSystemInfo({
  success: (info) => (screenWidth.value = info.windowWidth)
})
// 计算出实际currentContainerWidth
uni
  .createSelectorQuery()
  .in(instance)
  .select('.container')
  .fields(
    { scrollOffset: true, size: true, dataset: true, rect: true, id: true },
    (res: any) => (currentContainerWidth.value = res.width)
  )
  .exec()

// === css vars ===
// 动态计算containerWidthForRpx
let pageMaxWeight = ref(750)
let itemPaddingSize = ref('22rpx')
let itemLeftWidth = ref('125rpx')
let itemLeftMarginRightSize = ref('18rpx')
let containerWidthForRpx = computed(() => (currentContainerWidth.value / screenWidth.value) * pageMaxWeight.value)
let itemRightWidth = computed(() => {
  if (screenWidth.value == null || currentContainerWidth.value == null) return '0rpx'
  return (
    containerWidthForRpx.value -
    parseFloat(itemPaddingSize.value) * 2 -
    parseFloat(itemLeftWidth.value) -
    parseFloat(itemLeftMarginRightSize.value) +
    'rpx'
  )
})
</script>

<style scoped lang="scss">
.container-wrapper {
  padding: 0 30rpx;
  box-sizing: border-box;

  .container {
    display: flex;
    overflow: hidden;
    margin-bottom: 20rpx;
    padding: v-bind(itemPaddingSize);
    width: 100%;
    border-radius: 18rpx;
    background-color: #fff;
    box-sizing: border-box;

    .left {
      margin-right: v-bind(itemLeftMarginRightSize);
      width: v-bind(itemLeftWidth);

      .logo-image {
        overflow: hidden;
        width: v-bind(itemLeftWidth);
        height: v-bind(itemLeftWidth);
        flex-shrink: 0;
        border-radius: 12rpx;
      }
    }

    .right {
      display: flex;
      flex-grow: 1;
      flex-direction: column;

      .head-info {
        display: flex;
        align-items: center;

        .reputation {
          display: inline-block;
          margin-right: 10rpx;
          padding: 5rpx 12rpx;
          font-size: 24rpx;
          font-weight: bold;
          border-radius: 9rpx;
          white-space: nowrap;
          color: #fff;
        }

        .shop-name {
          overflow: hidden;
          font-size: 30rpx;
          font-weight: bold;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 48rpx;
        }
      }

      .statistical {
        $statistical-font-size: 24rpx;

        display: inline-block;
        font-size: $statistical-font-size;
        color: #adadad;

        .item {
          display: inline-block;
          margin-right: 12rpx;
        }

        .scope {
          font-weight: bold;
          color: #f70;

          .scope-value {
            font-size: $statistical-font-size * 1.2;
          }
        }
      }

      .activity {
        display: flex;
        margin: 10rpx 0;
        flex-wrap: wrap;

        text {
          $activity-color: rgb(255 47 47);

          display: inline-block;
          margin-right: 8rpx;
          margin-bottom: 8rpx;
          padding: 5rpx 13rpx;
          font-size: 22rpx;
          border: 1px solid $activity-color;
          border-radius: 9rpx;
          color: $activity-color;
          box-sizing: border-box;
        }
      }

      .dish-priority-display::-webkit-scrollbar {
        display: none;
      }

      .dish-priority-display {
        overflow: scroll;
        box-sizing: border-box;

        /** 在没计算出来前 */
        width: 0rpx;

        .rol {
          display: inline-flex;
          align-items: center;
          height: 100%;

          /* 实现x轴实现的重要css */
          white-space: nowrap;

          .dish {
            $dish-width: 150rpx;

            display: inline-block;
            overflow: hidden;
            margin-right: 12rpx;
            width: $dish-width;
            text-overflow: ellipsis;
            white-space: nowrap;

            .dish-image-box {
              display: flex;
              flex-direction: column;

              .dish-image {
                overflow: hidden;
                width: $dish-width;
                height: $dish-width * 0.8;
                border-radius: 16rpx;
              }
            }

            .dish-name {
              font-size: 25.5rpx;
              line-height: 42rpx;
            }

            .price {
              $now-price-font-size: 28rpx;

              .now-price {
                font-size: $now-price-font-size;
                font-weight: bold;
                color: #f44;

                .amount-symbol {
                  font-size: $now-price-font-size * 0.7;
                }
              }

              .old-price {
                font-size: $now-price-font-size * 0.8;
                text-decoration: line-through;
                color: #adadad;
              }
            }
          }
        }
      }

      .tis {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        .out-range-tis {
          $tis-color: #c0c0c0;

          display: inline-block;
          margin: 10rpx 0;
          padding: 2rpx 12rpx;
          font-size: 24rpx;
          font-weight: 700;
          border: 1.1px solid $tis-color;
          border-radius: 10rpx;
          color: $tis-color;
        }
      }
    }
  }
}
</style>
